<!--
 * @Description: 旋转
 * @Date: 2022-07-28 16:11:58
 * @LastEditTime: 2022-12-07 16:49:16
 * @FilePath: /测试文档(总结)/46.旋转.html
 * @Author: byhzdemacbook-pro-2.local
-->
<div class="box">
  <button></button>
  <div class="card">
    <div class="card-on card-on2">
      zheng
    </div>
    <div class="card-on card-in ">
      fan
    </div>
  </div>
</div>
<style>
  .card-on {
    transition: all 0.8s ease; /*旋转必写要素*/
    position: absolute;
    top: 0px;
    left: 0px;
    height: 366px;
    width: 238px;
    backface-visibility: hidden; /*旋转必写要素*/
    overflow: hidden;
    border-radius: 10px;
    
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  }

  .card-on {
    background: rgb(15, 86, 153);
  }

  .card-in {
    background: red;
    transform: rotateY(180deg);
  }

  .card:hover .card-on2 {
    transform: rotateY(-180deg);
  }

  .card:hover .card-in {
    transform: rotateY(0deg);
  }
</style>